<template>
    <LayOut :bread="[{
        url: '/bill',
        title: '账单',
    }, {
        title: '账单上传',
    }]">
        <el-row style="padding-bottom: 20px;">
            <el-col :span="8">
                <div style="display: flex; align-items: center;">
                    <span class="redText">*&nbsp;</span>
                    <span style="width: 150px">选择支付平台：</span>
                    <el-select v-model="paltform" placeholder="请先选择支付平台，然后再上传文件" size="large" clearable
                        @change="change">
                        <el-option v-for="item in paltformOpt" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>
            </el-col>
        </el-row>

        <el-upload class="upload-demo" :disabled="disabled" drag :action="`/api/bill/upload?paltform=${paltform}`"
            :on-success="successHandle" :on-error="errorHandle" multiple>
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                文件拖曳到这里或者 <em>点击上传文件</em>
            </div>
            <!-- <template #tip>
                <div class="el-upload__tip">
                    jpg/png files with a size less than 500kb
                </div>
            </template> -->
        </el-upload>
    </LayOut>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import LayOut from '../components/LayOut.vue'
import { UploadFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';

const paltform = ref('');
const disabled = ref(true);

const paltformOpt = [{
    label: '支付宝',
    value: 1
}, {
    label: '微信',
    value: 2
}]

const change = (val) => {
    if (val) {
        disabled.value = false;
    } else {
        disabled.value = true;
    }
}

const successHandle = () => {
    ElMessage.success('上传成功');
}

const errorHandle = () => {
    ElMessage.error('上传失败');
}
</script>
<style lang="less" scoped>
.redText {
    color: #FF6F61;
    font-weight: bold;
}
</style>